<template>
  <div class="commentBack">
    <common-head title="评论回复" color="#000" bgColor="#fff"></common-head>
    <div class="content">
      <div v-for="(item,index) in commentlist" :key="index">
        <div class="left">
          <img :src="item.userPhoto" alt="">
        </div>
        <div class="right">
          <div>
            <span>{{item.userName}}</span>
            <span>{{item.countLike}}</span>
            <span @click="countLike(index)">
              <!--<yd-icon :name="iconName" custom slot="icon" size="0.5rem"></yd-icon>-->
            </span>

          </div>
          <div @click="reply(index)">{{item.replyDetail}}</div>
          <div>{{item.htmlTime}}</div>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class="con">
      <textarea v-model="text" autofocus></textarea>
      <span @click="release()">发布</span>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import commonHead from '@/components/commonHead'
  import '@/common/less/icon.less';

  export default {
    components: {
      commonHead,
    },
    data() {
      return {
        comment: null,
        text:null,
        commentlist:null
      }
    },
    activated() {
      this.comment = this.$route.query.comment;
      this.http()
    },
    methods: {
      http(th) {
        if(th==undefined){
          th = this
        }
        console.log(th.comment)
        var data = {
          commentid: th.comment.id,
          page: 1,
          size: 5
        }
        console.log(th.comment)
        th.ylAjax.commentReplys(data).then(msg => {
//          console.log(msg)
          for(var i=0;i<msg.length;i++){
            msg[i].htmlTime = th.$options.methods.time(msg[i])
          }
          th.commentlist = msg
        })
      },
      release() {
        let data={
          userID:localStorage.userid,
          replyDetail:this.text,
          commentInfoID:this.comment.id
        }
        this.ylAjax.commentReply(data).then(msg=>{
          this.$options.methods.http(this)
          this.text = null
        }).catch(msg=>{
          console.log(msg)
        })
      },
      time(data) {    //进行时间判断
        let date = null     //字符串时间转时间戳
        date = data.replyTime.substring(0, 19);
        date = date.replace(/-/g, '/');
        let timeZone = 8 * 60 * 60 * 1000;   //时区转换
        let timestamp = new Date(date).getTime() + timeZone;

        let htmlTime = null;
        let time = new Date().getTime();
        let resourceTime = timestamp;
        let n = time - resourceTime;
        let hour = 24 * 60 * 60 * 1000;  //24小时
        let minute = 60 * 60 * 1000;    //60分钟
        let second = 60 * 1000;      //60秒
        if (n > hour) {
          htmlTime = Math.round(n / hour) + '天前'
        } else if (n < hour && n > minute) {
          htmlTime = Math.round(n / minute) + '小时前'
        } else {
          htmlTime = Math.round(n / second) + '分钟前'
        }
        return htmlTime
      },
    }
  }
</script>
<style scoped lang="less">
  @import "~less/base";

  .commentBack {
    position: fixed;
    z-index: 35;
    background: @read-bg;
    height: 100%;
    width: 100%;
    .content {
      padding-bottom: 1rem;
      margin-top: 1.2rem;
      > div {
        border-bottom: 1px solid #c6c6c6;
        padding-top: 0.2rem;
        height: 2.2rem;
        > div {
          float: left;
        }
        .left {
          width: 15%;
          > img {
            margin-left: 0.1rem;
            margin-top: 0.3rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            border: 1px solid #ffb36e;
          }
        }
        .right {
          width: 84%;
          > div {
            line-height: 0.5rem;
            width: 100%;
          }
          > div:nth-child(1) {

            > span:nth-child(1) {
              color: #2585d9;
              font-size: 14px;
            }
            > span:nth-child(2) {
              float: right;
              margin-right: 0.5rem;
            }
            > span:nth-child(3) {
              float: right;
              margin-right: 0.2rem;
            }
          }
          >div:nth-child(3){
            font-size: 14px;
            color: #c2c2c2;
          }
        }
      }
    }
    .con {
      width: 100%;
      height: 1rem;
      background: #fff;
      position: fixed;
      bottom: 0;
      border-top: 1px solid #c2c2c2;
      background: #fff;
      > textarea {
        font-size: 16px;
        height: 0.7rem;
        padding: 0 0.3rem;
        border: none;
        line-height: 0.7rem;
        width: 70%;
        position: absolute;
        font-size: 14px;
        top: 50%;
        left: 0.5rem;
        transform: translateY(-50%);
        background: #e7e7e7;
        border-radius: 0.7rem;
      }
      > span {
        position: absolute;
        right: 0.2rem;
        top: 50%;
        transform: translateY(-50%);
        letter-spacing: 6px;
        color: #949494;
      }
    }
  }
</style>
